<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import Footer from "../components/Footer.vue";
import {getDeliveryAddressByUserId, removeDeliveryAddress} from "../network/api.ts";

const route = useRoute()
const router = useRouter()
let businessId = route.query.businessId
let user = ref({
  userId:sessionStorage.getItem("userId"),
  password:"",
  userName:sessionStorage.getItem("userName"),
  userSex:sessionStorage.getItem("userSex"),
  userImg:""
})
let deliveryAddress = reactive({
  daId:0,
  contactName:"",
  contactSex:1,
  contactTel:"",
  address:"",
  userId:""
})//只有面对需要放在数组里面做声明的时候, 才是用reactive 对象
let deliveryAddressArr = ref([deliveryAddress])
let userT = ref(sessionStorage.getItem("user"))
let url = "http://localhost:8080"
let userCall = ref()

onMounted(()=>{
  listDeliveryAddressByUserId()
})
function listDeliveryAddressByUserId(){
  getDeliveryAddressByUserId(user.value.userId).then(res=>{
        deliveryAddressArr.value = res.data
        console.log("res.data ="+res.data) //注意查不到可能是因为, 这个用户没有地址记录
        console.log("deliveryAddressArr.value[0].daId = "+deliveryAddressArr.value[0]?.daId)
      })
      .catch(error=>{
        console.log(error)
      })
}

function setDeliveryAddress(address){
  localStorage.setItem(user.value.userId,address) //这里是将用户id作为key, 用户的地址作为value 来记录
  console.log(address)
  router.push({
    path:"/orders",
    query:{businessId:businessId}
  })
}

function toAddUserAddress(){
  router.push({path:'/addUserAddress',query:{businessId:businessId}});
}
function editUserAddress(daId){
  router.push({path:'/editUserAddress',query:{businessId:businessId,daId:daId}});
}

function removeUserAddress(daId){
  if(!confirm('确认要删除此送货地址吗？')){
    return;
  }
  removeDeliveryAddress(daId).then(res=>{
        console.log(res.data)
        if(res.data == 1){
          let da = localStorage.getItem(user.value.userId)
          if(da!=null && deliveryAddress.daId==daId){ //如果dA为null, 说明用户没有默认地址
            localStorage.removeItem(user.value.userId)
          }
          listDeliveryAddressByUserId()
          console.log("删除成功, 重新展示用户地址列表")
        }else{
          alert("删除地址失败")
          console.log("删除地址失败")
        }
      })
      .catch(error=>{
        console.error(error)
      })
}


</script>

<template>
  <div class="wrapper w-full h-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>地址管理</p>
    </header>

    <!-- 地址列表部分 -->
    <ul class="addresslist w-full mt-12vw bg-white">
      <li v-for="item in deliveryAddressArr"
          class="w-full box-border border-b-1px border-solid border-#ddd p-3vw flex ">
        <div class="addresslist-left flex-auto select-none cursor-pointer"
             @click="setDeliveryAddress(item.address)">
          <h3 class="text-4.6vw font-300 text#666">{{item.contactName}}{{item.contactSex==1?'男士':'女士'}} {{item.contactTel}}</h3>
          <p class="text-4vw text-#666">{{item.address}}</p>

        </div>
        <div class="addresslist-right flex-auto  text-#999 cursor-pointer flex justify-around items-center">
          <div class="fa-edit w-5.6vw" @click="editUserAddress(item.daId)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575V19Zm-1 2q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15q.4 0 .775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15H4ZM19 6.4L17.6 5L19 6.4Zm-3.525 2.125l-.7-.725L16.2 9.225l-.725-.7Z"/></svg>

          </div>
          <div class="fa-remove w-5.6vw" @click="removeUserAddress(item.daId)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5q0-.425.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5q0 .425-.288.713T19 6v13q0 .825-.587 1.413T17 21H7ZM17 6H7v13h10V6Zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8q-.425 0-.712.288T9 9v7q0 .425.288.713T10 17Zm4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8q-.425 0-.712.288T13 9v7q0 .425.288.713T14 17ZM7 6v13V6Z"/></svg>
          </div>
        </div>
      </li>
    </ul>

    <!-- 新增地址部分 -->
    <div class="addbtn w-full h-14vw border-t-1px border-solid border-#ddd border-b-1px bg-#fff mt-4vw flex justify-center items-center text-4.5vw text-#0097ff  select-none cursor-pointer "
         @click="toAddUserAddress">
      <div class="fa fa-plus-circle w-5.5vw flex justify-center items-center text-#0097EF cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4v4Zm1 5q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
      </div>
      <p class="ml-2vw">新增收货地址</p>

    </div>
    <p class="flex mt-3vw select-none justify-center items-center text-3vw text-cyan-6">点击地址行, 进入订单页</p>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<style scoped>

</style>